<script setup lang="ts">
import TabBar from "@/components/TabBar.vue";
import HeaderArea from "@/components/search/HeaderArea.vue";
import {ref} from "vue";
import {attachUpload, editUser, outLogin, personalInfomation} from "@/api/person/person";
// import type {InterFacePHb} from "@/api/person/inter";
import PersonalWork from "@/views/PersonalCenter/components/personalWork.vue";
import {showToast} from "vant";
import {getUseInfor} from "@/api/person/Persistence";

// let imgs = [
//     {
//         img: "/src/views/PersonalCenter/images/我的申请.png",
//         text: "我的申请"
//     },
//     {
//         img: "/src/views/PersonalCenter/images/我的发布.png",
//         text: "我的发布"
//     },
//     {
//         img: "/src/views/PersonalCenter/images/抽奖记录.png",
//         text: "签到中心"
//     },
//     {
//         img: "/src/views/PersonalCenter/images/联系客服.png",
//         text: "积分明细"
//     },
//     {img:"/src/views/PersonalCenter/images/我的消息.png",
//         text: "积分兑换记录"
//     },
//     {
//         img: "/src/views/PersonalCenter/images/退出登录.png",
//         text: "抽奖记录"
//     },
//     {
//         img: "/src/views/PersonalCenter/images/联系客服.png",
//         text: "联系客服"
//     },
//     {
//         img: "/src/views/PersonalCenter/images/我的消息.png",
//         text: "我的消息"
//     },
//     {
//         img: "/src/views/PersonalCenter/images/退出登录.png",
//         text: "退出登录"
//     },
// ]
// ***********************请求个人数据,获取头像
// const headIMg=ref()
// const userInfo = ref({})
const User=getUseInfor()
// console.log(userInfo.then(res=>{
//     console.log(res)
// }))
// console.log(userInfo.value.data)
personalInfomation().then(res=>{
    console.log(res);
    (User as any).userInfo=res;
    // console.log(User.userInfo)
    // console.log(User.userInfo.data.userId)
    // console.log(User.userInfo.data.avatar)
    // console.log(User.userInfo.data.avatar)
    if (User.userInfo.data.avatar.startsWith('http://192.168.5.120:8199')){
        User.userInfo.headIMg = User.userInfo.data.avatar//更新后
    }else{
        User.userInfo.headIMg='http://192.168.5.120:8199'+User.userInfo.data.avatar//更新前
    }
    // User.userInfo.headIMg='http://192.168.5.120:8199'+User.userInfo.data.avatar//更新前
    // headIMg.value=res.data.avatar//更新后
})
// ****************************个人数据结束

//****************************** 弹出框
const show = ref(false);
const show1 = ref(false);
const showPopup = () => {
    show.value = true;
};
const showPopup1 = () => {
    show1.value = !show1.value;
};
// 点击弹出框状态变化
// 确认头像修改
function comfirChange(){
    if (fileList.value){
        show.value=!show.value
        User.userInfo.headIMg=fileList.value
        editUser({userId:User.userInfo.data.userId , avatar: url.value}).then(res=>{
            console.log('编辑成功')
            fileList.value=''
            // location.reload()
            console.log(url.value)
            // User.userInfo.data.avatar = url.value
            User.setUserIfon(url.value)
            // console.log(User.userInfo.data)
        })
    }else {
        showToast('请选择头像');
    }
}
//*************************** 弹出框结束

//***************************头像上传
const fileList = ref('');
const url = ref('')
const afterRead = (file) => {
    // // 此时可以自行将文件上传至服务器
    fileList.value=file.objectUrl
    attachUpload(file.file).then(res => {
        url.value = (res as any).url
        //返回的url   传给pinia里面的头像
        // userInfo.value.data.avatar = res.url
        User.userInfo.data.avatar = (res as any).url
    })
};
// **************************头像上传结束
// 刷新
const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        count.value++;
    }, 1000)}
</script>

<template>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div id="personalCenter">
     <header-area>个人中心</header-area>
        <div class="person_top">
            <div class="HeadImage">
<!--                判断显示哪个头像-->
                <img :src="User.userInfo.headIMg" height="60" width="60" alt="" @click="showPopup"/>
<!--                <img v-if="imageUrl" :src="imageUrl" alt="Selected Image" height="60" width="60"  @click="showPopup"/>-->
                <!--                弹出框内容-->
                <van-popup v-model:show="show" position="top" overlay-class="header-overlay"
                           :style="{ height: '23%',width:'375px',marginTop:'35px' }">
                    <div class="changeHead">
                        <div class="option"><span>修改头像</span>
                            <button @click="comfirChange">确认修改</button>
                        </div>
                        <div  class="optionHead" @click="showPopup1">
<!--                            判断显示加号还是头像-->
                            <img v-if="fileList" :src="fileList" alt="Selected Image" style="width: 100%;height: 100%"/>
                            <span v-else style="font-size: 120px;">+</span>
                        </div>
                    </div>
                    <!--                弹出框内容-->
                    <van-popup v-model:show="show1" position="bottom" round overlay-class="header-overlay"
                               :style="{ height: '23%',width:'375px' }">
                        <div class="image_option">
                            <p>拍摄</p>
                            <p @click="showPopup1">从相册选择
                                <van-uploader :after-read="afterRead"  />
<!--                                <input @change="handleImageChange" type="file" style="position: absolute;opacity: 0;-->
<!--                                  top: 49px;height: 40px; width: 370px;left: 0;z-index: 2">-->
                            </p>
                            <p @click="showPopup1">取消</p>
                        </div>
                    </van-popup>
                </van-popup>

                <div class="HeadImage_name">
                    <h2>燕冠佐</h2>
                    <span>大傻逼</span>
                </div>
            </div>
            <router-link to="/Vipcenter">
                <div class="membershipCard"></div>
            </router-link>

        </div>
        <div class="personal_information">
<!--            <div  v-for="(item,index) in imgs" :key="index">-->
<!--                <div v-if="index==6" class="personal_information_each">-->
<!--                    <img :src=item.img height="15" width="15" alt="">-->
<!--                    <p>{{ item.text }}</p>-->
<!--                    <img src="./images/下一步.png" height="5" width="5" alt="">-->
<!--                </div>-->
<!--                <div v-else-if="index==8" class="personal_information_each">-->
<!--                    <img :src=item.img height="15" width="15" alt="">-->
<!--                    <p>{{ item.text }}</p>-->
<!--                    <img src="./images/下一步.png" height="5" width="5" alt="">-->
<!--                </div>-->
<!--            </div>-->
            <personal-work></personal-work>
        </div>

        <van-sticky :offset-bottom="0" position="bottom">
            <TabBar></TabBar>
        </van-sticky>
    </div>
    </van-pull-refresh>
</template>

<style scoped lang="less">
#personalCenter {
    //min-height: 667px;
  height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #F3F5F7;
}

.person_top {
    width: 100%;
    height: 160px;
    background-color: #F3F5F7;
    overflow: hidden;
    box-shadow: 0 -5px 10px -5px gray inset;

    .HeadImage {
        display: flex;
        align-items: center;
        margin: 20px 0 20px 20px;

        .HeadImage_name {
            color: black;
            margin-left: 10px;

            span {
                font-size: 12px;
                color: gray;
            }
        }
    }
    .HeadImage:hover{
        cursor: pointer;
    }
    .membershipCard {
        background-image: url("./images/VIpCard.png");
        margin: 0 auto;
        width: 90%;
        height: 60px;
        background-color: blue;
        border-radius: 20px 20px 0 0;
    }
    .membershipCard{
        cursor: pointer;
    }
}

.personal_information {
    width: 92%;
    //height: 400px;
    margin: 0 auto;
    //margin-top: 10px;
    padding: 0 10px;
    border-radius: 10px;
    background-color: white;
    overflow: hidden;
}

//更换头像
.changeHead {
    margin-top: 15px;
    padding: 0 10px;
    overflow:hidden;

    .option {
        display: flex;
        justify-content: space-between;

        button {
            color: white;
            background-color: red;
            border: none;
            padding: 5px 10px;
            border-radius: 3px
        }
    }

    .optionHead {
        width: 90px;
        height: 90px;
        text-align: center;
        line-height: 90px;

        font-weight: 100;
        color: #e2e2e2;
        border: 1px solid #e2e2e2;
    }
}

.image_option {
    position: relative;
    text-align: center;
    background-color: #e2e2e2;

    p {
        padding: 10px;
        border-bottom: 1px solid #e2e2e2;
        background-color: white;
        font-size: 16px;
    }

    p:last-child {
        margin-top: 10px;
        padding: 12px;
        border-bottom: none;
    }
}
//更改遮罩层样式
:deep(.header-overlay) {
    background-color: rgba(0, 0, 0, 0.3); // 遮罩层颜色
    //backdrop-filter: blur(6px); // 模糊效果
}

:deep(.van-uploader__upload) {
  width: 100%;
  margin: 0;
  height: 30px;
}

:deep(.van-uploader) {
  float: left;
  top:-27px;
  width: 100%;
  opacity: 0;
}
:deep(.van-tabbar-item__text){
  margin-bottom: 0;
}
:deep(.Box){
  padding: 0;
}
</style>